{% extends 'layout/manage.html' %}
{% load static %}
{% block title %}
    wiki文章添加
{% endblock %}

{% block css %}
    <link rel="stylesheet" href="{% static 'plugin/editor-md/css/editormd.min.css' %}">
    <style>
        .error-msg {
            color: red;
            display: block;
            font-size: 15px;
        }

        .panel-default {
            margin-top: 10px;
        }

        .panel-default .panel-heading {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        .panel-body {
            padding: 0;
        }

        .title-list {
            border-right: 1px solid #dddddd;
            min-height: 500px;
        }

        .title-list ul {
            padding-left: 15px;
        }

        .title-list ul a {
            display: block;
            padding: 5px 0;
        }

        .content {
            border-left: 1px solid #dddddd;
            min-height: 600px;
            margin-left: -1px;
        }

        .editormd-fullscreen {
            z-index: 1001;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="container-fluid">
        <div class="panel panel-default">
            <div class="panel-heading">
                <div>
                    <i class="fa fa-book" aria-hidden="true"></i> wiki文档
                </div>

                <div class="function">
                    <a type="button" class="btn btn-success btn-xs"
                       href="{% url 'wiki_add' project_id=request.tracer.project.id %}">
                        <i class="fa fa-plus-circle" aria-hidden="true"></i> 新建
                    </a>

                </div>
            </div>
            <!--面板内容-->
            <div class="panel-body" style="margin-top: 10px">
                <!--文章标题-->
                <div class="col-sm-3 title-list">
                    <ul id="multilevelDirectory">

                    </ul>
                </div>
                <!--文章内容-->
                <div class="col-sm-9 content">
                    <div style="line-height: 20px">
                        <form id="addEditForm" novalidate>

                            {% csrf_token %}
                            {% for field in form %}
                                {% if field.name == 'content' %}
                                    <div class="form-group">
                                        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                                        <div id="editor">
                                            {{ field }}
                                        </div>
                                        <span class="error-msg"></span>
                                    </div>
                                {% else %}
                                    <div class="form-group">
                                        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                                        {{ field }}
                                        <span class="error-msg"></span>
                                    </div>
                                {% endif %}
                            {% endfor %}

                            <input id="id_addEditForm" type="button" class="btn btn-success" value="提交"
                                   style="margin-top: 5px;">
                        </form>
                    </div>
                </div>
                <div></div>
            </div>
        </div>
    </div>

{% endblock %}


{% block js %}
    <script src="{% static 'plugin/editor-md/editormd.min.js' %}"></script>

    <script>
        $(function () {
            addEdit();
            initEditorMd();
            initMultilevelDirectory();

        })

        // editor_md
        function initEditorMd() {
            var WIKI_UPLOAD_URL = "{% url 'upload_img' project_id=request.tracer.project.id %}"
            editormd('editor', {
                placeholder: "请输入内容",
                height: 500,
                path: "{% static 'plugin/editor-md/lib/' %}",
                imageUpload: true,
                imageFormats: ["jpg", 'jpeg', 'png', 'gif'],
                imageUploadURL: WIKI_UPLOAD_URL

            })
        }

        // 添加文章
        function addEdit() {
            $("#id_addEditForm").click(function () {
                $.ajax({
                    url: "{% url 'wiki_add' project_id=request.tracer.project.id %}",
                    type: "POST",
                    data: $("#addEditForm").serialize(),
                    dataType: "JSON",
                    success: function (ret) {
                        if (ret.status) {
                            location.href = '{% url "wiki" project_id=request.tracer.project.id %}'
                        } else {
                            $.each(ret.msg, function (key, value) {
                                console.log('id_' + key)
                                $("#id_" + key).next().text(value[0])
                            })
                        }
                    }
                })
            })
        }

        // 多级目录
        function initMultilevelDirectory() {
            $.ajax({
                url: "{% url 'multilevel_directory' project_id=request.tracer.project.id %}",
                type: "GET",
                dataType: "JSON",
                success: function (ret) {
                    // console.log(ret.data)  {parent_id: null, title: '’看','id':23} {parent_id: 1, title: '哦i建安费奢侈品'}
                    // 建立标签

                    if (ret.data) {
                        // 有数据
                        $.each(ret.data, function (key, value) {
                            var HREF = "{% url 'wiki' project_id=request.tracer.project.id %}" + '?wiki_id=' + value.id
                            var li = $('<li>').attr('id', 'id_' + value.id,).append($('<a>').text(value.title).attr('href', HREF)).append($('<ul>'));
                            // key 索引 value 字典
                            if (!value.parent_id) {
                                // 没有父级，添加一个li
                                $('#multilevelDirectory').append(li)
                            } else {
                                // 找到对应的parent_id对应的id号
                                $('#id_' + value.parent_id).children('ul').append(li)
                            }
                        })
                    } else {
                        // 没有数据
                    }
                }
            })
        }


    </script>
{% endblock %}